<template>
  <div class="bottomLeft">
    <div class="bg-color-black">
      <div class="box">
        <div class="box-item1">
          <div class="box-title">
            <img :src="img" class="title-img" style="height: 16px" alt="" />
            薪资TOP10公司
          </div>
          <dv-scroll-board class="dv-scr-board" :config="config" />
        </div>
        <div class="box-item2">
          <div class="box-title">
            <img :src="img" class="title-img" style="height: 16px" alt="" />
            行业占比
          </div>
          <div ref="chartRef" class="chartBox" />
        </div>
      </div>
      <!-- <div>
        <div ref="chartRef" class="chartBox" />
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, defineProps, watch } from "vue";
import * as echarts from "echarts";
import { getSalaryTopTen, getProportion } from "@/api/dataView";

// 定义 ref
const chartRef = ref();
const unwarp = (obj) => obj && (obj.__v_raw || obj.valueOf() || obj);
const myChart = ref(null);
const allNum = ref(0);
const proportionData = ref([]);
const icon1 = ref(require("@/assets/icon1.png"));
const icon2 = ref(require("@/assets/icon2.png"));
const icon3 = ref(require("@/assets/icon3.png"));
const img = ref(require("@/assets/three.png"));
const config = ref();
const props = defineProps(['selectId']);



watch(()=>props.selectId, (newVal)=>{
  if(props.selectId || props.selectId == 0) {
    getSalaryTopTenList(newVal)
    getProportionData(newVal)
  }
},{
  immediate: true,
  deep: true
})
// 获取薪资TOP10公司
async function getSalaryTopTenList(id) {
  const res = await getSalaryTopTen(id);
  const list = res.data.map((item) => {
    return [item];
  });
  config.value = {
    // header: ["组件", "分支", "覆盖率"],
    data: list,
    rowNum: 7, //表格行数
    headerHeight: 35,
    headerBGC: "#0f1325", //表头
    oddRowBGC: "#0f1325", //奇数行
    evenRowBGC: "#171c33", //偶数行
    index: true,
    columnWidth: [50],
    align: ["center"],
  };
  // console.log("resres", res);
}

// 通过名字获取行业的数量
function getProportionNum(name) {
  let num = 0;
  proportionData.value.forEach((item) => {
    if (item.name == name) {
      num = item.number;
    }
  });
  return num;
}
// 获取行业占比
async function getProportionData(id) {
  const res = await getProportion(id);
  proportionData.value = res.data;
  let dataList = [];
  if (res.data && res.data.length > 0) {
    let code = 0;
    res.data.forEach((item) => {
      code += item.number;
      dataList.push({
        name: item.name,
        value: item.number,
      });
    });
    allNum.value = code;
  }
  // 配置项
  let options = {
    tooltip: {
      show: false,
    },
    grid: {
      top: "1%",
      bottom: "1%",
    },
    legend: {
      orient: "vertical",
      // left: "left",
      x: "100",
      y: "240",
      textStyle: {
        color: "white",
      },
      formatter: function (name) {
        return name + `${(getProportionNum(name) / allNum.value) * 100}%`;
      },
    },
    series: [
      {
        type: "pie",
        radius: ["35%", "50%"],
        center: ["50%", "30%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: "bold",
            color: "white",
            formatter: function (data) {
              return `${data.name} \n ${(data.value / allNum.value) * 100}%`;
            },
          },
        },
        labelLine: {
          show: false,
        },
        data: dataList,
      },
    ],
  };
  myChart.value = echarts.init(chartRef.value);
  // console.log("myChart.value", myChart.value);
  unwarp(myChart.value).setOption(options);
  // console.log("res", res);
}

onMounted(() => {
  //getProportionData();
  //getSalaryTopTenList();
});
</script>

<style lang="scss" scoped>
$box-height: 460px;
$box-width: 100%;
.bottomLeft {
  padding: 20px 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height - 35px;
    border-radius: 10px;
  }
  .box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    .box-title {
      height: 40px;
      border-left: 5px solid #409eff;
      background-color: #081f43;
      padding-left: 25px;
      box-sizing: border-box;
      position: relative;
      line-height: 40px;
      .title-img {
        position: absolute;
        left: 6px;
        top: 12px;
      }
    }
    .box-item1 {
      width: 55%;
      overflow: hidden;
      .dv-scr-board {
        width: 100%;
        height: 440px;
      }
    }
    .box-item2 {
      width: 43%;
    }
  }
  .chart-box {
    margin-top: 16px;
    width: 170px;
    height: 170px;
    .active-ring-name {
      padding-top: 10px;
    }
  }
}
.chartBox {
  width: 100%;
  height: 400px;
}
</style>
